import React, { useState } from 'react'

const Component = () =>
{
    const [list,setList] = useState([])
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const [hasMore,setHasMore] = useState(true)
    const onRefresh = ()=>{
        setPage(1)
        setList([])
        setHasMore(true)
    }
    const loadMore = async()=>{
        let result = await React.request.get('/index/guest',{params:{page,pageSize}})
        setPage(page+1)
        setList(val => [...val, ...result.data])
        setHasMore(result.has_more)
    }

    const rightActions = (item)=>[
    {
        key: 'edit',
        color: 'primary',
        text: '编辑',
        onClick: async () => {
            setShow(true)
            Object.keys(item).forEach(k => {
                form.setFieldValue(k,item[k])
            });
        },
    },
    {
        key: 'delete',
        text: '删除',
        color: 'danger',
        onClick: () => {
            React.UI.Dialog.confirm({
                content: '确定要删除吗？',
                onConfirm: async () => {
                    let result = await React.request.delete(`/index/guest?id=${item.id}`)
                    result.code?React.toast(result.msg):React.toast(result.msg,'','fail')
                    onRefresh()
                  },
            })
        },
    }]
    const add = (values)=>{
        Object.keys(guest).forEach(k => {
            form.setFieldValue(k,guest[k])
        });
        setShow(true)
    }
    const [show,setShow] = useState(false)
    const [guest,setGuest] = useState({
        id:0,
        nickname: '', 
        mobile: '', 
        gender: '0'
    })
    const [form] = React.UI.Form.useForm()
    const onFinish = async()=>{
        let data = form.getFieldsValue(Object.keys(guest))
        let result = null
        if(data.id){
            result = await React.request.put(`/index/guest?id=${data.id}`,data)
        }else{
            delete data.id
            result = await React.request.post('/index/guest',data)
        }
        if(result.code){
            React.toast(result.msg)
            setShow(false)
            onRefresh()
        }else{
            React.toast(result.msg,'','fail')
        }
    }
    return (
        <>
            {/* 下拉刷新 */}
            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <React.UI.List>
                    {list.map((item, key) => (
                        <React.UI.SwipeAction key={key} rightActions={rightActions(item)}>
                            <React.UI.List.Item description={item.mobile}>{item.nickname} ({item.gender_text})</React.UI.List.Item>
                        </React.UI.SwipeAction>
                    ))}
                </React.UI.List>
            </React.UI.PullToRefresh>

            {/* 上拉加载无限滚动 */}
            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />

            {/* 底部按钮 */}
            <div style={{width:'100%', position:'fixed', left:'0px', bottom:'0px'}}>
                <React.UI.Button onClick={add} style={{borderRadius:'0px'}} block color='primary' size='large'>添加住客信息</React.UI.Button>
            </div>

            {/* 弹出层 */}
            <React.UI.Popup visible={show} closeOnMaskClick={true} onMaskClick={() => setShow(false)}>
                <React.UI.Form
                    form={form}
                    name="guest"
                    layout='horizontal'
                    mode='card'
                    initialValues={guest}
                    onFinish={onFinish}
                    footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
                >
                    <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                        <React.UI.Input placeholder="请输入昵称" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true}, {pattern:/^1[3456789]\d{9}$/, message: '手机号格式不对'}]}>
                        <React.UI.Input placeholder="请输入手机号" />
                    </React.UI.Form.Item>

                    <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                        <React.UI.Radio.Group>
                            <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>男</React.UI.Radio>
                            <React.UI.Radio value='1'>女</React.UI.Radio>
                            </React.UI.Space>
                        </React.UI.Radio.Group>
                    </React.UI.Form.Item>

                </React.UI.Form>
            </React.UI.Popup>
        </>
    )
}

export default Component